import 'package:fate_blind_box/chat_view/chat_net_image.dart';
import 'package:fate_blind_box/config/app_style.dart';
import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:fate_blind_box/ui/Home/activity/home_act_tab_page.dart';
import 'package:fate_blind_box/ui/Home/qsy/qsy_list_page.dart';
import 'package:fate_blind_box/ui/Home/qsy/zxyp_list_page.dart';
import 'package:fate_blind_box/ui/matcher/matcher_detail.dart';
import 'package:fate_blind_box/ui/matcher/matcher_list.dart';
import 'package:fate_blind_box/ui/moment/list.dart';
import 'package:fate_blind_box/utils/page.dart';
import 'package:fate_blind_box/widget/icon_text.dart';
import 'package:fate_blind_box/widget/max_extent_delegate.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:get/get.dart';

import 'logic.dart';

class MeetHomePage extends GetView<MeetHomeLogic> {
  const MeetHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Image.asset(
          'images/home_image.jpg',
          fit: BoxFit.cover, // 调整适应模式
        ),
      ),
    );
    return Scaffold(
      body: Obx(() {
        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomLeft,
                colors: [
                  '#EFE9FF'.stringToColor,
                  '#00EFE9FF'.stringToColor,
                ]),
          ),
          child: Stack(
            children: [
              CustomScrollView(
                controller: controller.state.controller,
                slivers: [
                  appBar(),
                  SliverToBoxAdapter(
                      child: SizedBox(
                    height: 96.w + ScreenUtil().statusBarHeight,
                    child: detailsSwiper(),
                  )),
                  buildMenus(),
                  sectionHeader(),
                  SliverList.builder(
                    itemBuilder: (context, index) {
                      if (controller.state.matchmakerList.isEmpty) {
                        return Container();
                      }
                      return buildItemView(index);
                    },
                    itemCount: controller.state.matchmakerList.length,
                  ),
                ],
              ),
              Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  child: Opacity(
                    opacity: controller.state.opacity.value,
                    child: Container(
                      alignment: Alignment.bottomCenter,
                      padding: EdgeInsets.only(bottom: 12.w),
                      height: ScreenUtil().statusBarHeight + 44.w,
                      width: double.infinity,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(colors: [
                        '#EFE9FF'.stringToColor,
                        '#EFE9FF'.stringToColor,
                      ])),
                      child: Text(
                        '都肆商圈',
                        style: TextStyle(
                          color: '#000000'.stringToColor,
                          fontSize: 18.sp,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  )),
            ],
          ),
        );
      }),
    );
  }

  /// 导航栏
  Widget appBar() {
    if (controller.state.pinned.value) {
      return SliverToBoxAdapter(
        child: Container(
          height: ScreenUtil().statusBarHeight,
          color: Colors.transparent,
        ),
      );
    } else {
      return SliverToBoxAdapter(
        child: Container(
          height: ScreenUtil().statusBarHeight + 22.w,
          color: Colors.transparent,
        ),
      );
    }
  }

  /// 轮播图
  Widget detailsSwiper() {
    return Container(
      color: Colors.transparent,
      child: AspectRatio(
        //设置图片的展示比例之后，可以不设置外层的宽度，或者设置成infinity
        aspectRatio: 3.6,
        child: Swiper(
          itemCount: controller.state.imgList.length,
          itemBuilder: (BuildContext context, int index) {
            return Container(
                margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 12),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(8.w),
                  child: Image.asset(
                    controller.state.imgList[index],
                    fit: BoxFit.cover,
                  ),
                ));
          },
          //分页指示器
          pagination: const SwiperPagination(builder: SwiperPagination.rect),
          //页面上的左右箭头
          control: null,
          //自动轮播
          autoplay: true,
          loop: true,
        ),
      ),
    );
  }

  /// 菜单
  Widget buildMenus() {
    return SliverToBoxAdapter(
      child: Container(
        decoration: ShapeDecoration(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(8.w),
          ),
          color: Colors.white,
        ),
        margin:
            EdgeInsets.only(top: 15.w, left: 13.w, right: 13.w, bottom: 12.w),
        child: Column(
          children: [
            const SizedBox(
              height: 15,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                    onTap: () {
                      // 诚信约会
                      // Navigator.of(context).push(MaterialPageRoute(builder: (builder) => const BlindTrustUi()));
                      // 圈子
                      Navigate.toPage(const CycleListUi());
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_mequanz.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '我的圈子',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
                GestureDetector(
                    onTap: () {
                      Get.to(const HomeActTabPage());
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_xiangqinhd.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '相亲活动',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
                GestureDetector(
                    onTap: () {
                      controller.jumpNearByView();
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_chihewl.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '吃喝玩乐',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
                GestureDetector(
                    onTap: () {
                      // 单身驿站
                      controller.jumpNearByView();
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_danshenyz.png",
                          height: 36,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '单身驿站',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
              ],
            ),
            const SizedBox(
              height: 10,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                    onTap: () {
                      Navigate.toPage(const QSYListPage());
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_qsy.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '轻松游',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
                GestureDetector(
                    onTap: () {
                      Get.to(const ZXYPListPage());
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_zxyp.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                        ),
                        const SizedBox(height: 3),
                        Text(
                          '甄选优品',
                          style: TextStyle(
                              fontSize: 12, color: ThemeColor.black2E363DColor),
                        ),
                      ],
                    )),
                Column(
                  children: [
                    Image.asset(
                      "images/ic_qsy.png",
                      height: controller.state.imgHeight,
                      fit: BoxFit.fitHeight,
                      color: Colors.white,
                    ),
                    const SizedBox(height: 3),
                    const Text(
                      '轻松游',
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    ),
                  ],
                ),
                GestureDetector(
                    onTap: () {
                      Get.to(const HomeActTabPage());
                    },
                    child: Column(
                      children: [
                        Image.asset(
                          "images/ic_zxyp.png",
                          height: controller.state.imgHeight,
                          fit: BoxFit.fitHeight,
                          color: Colors.white,
                        ),
                        const SizedBox(height: 3),
                        const Text(
                          '甄选优品',
                          style: TextStyle(fontSize: 12, color: Colors.white),
                        ),
                      ],
                    )),
              ],
            ),
            const SizedBox(
              height: 15,
            ),
          ],
        ),
      ),
    );
  }

  /// 热心红娘
  Widget sectionHeader() {
    return SliverPersistentHeader(
        pinned: false,
        delegate: MaxExtentDelegate(
          height: 36.w,
          child: Row(
            children: [
              Container(
                width: 8,
                height: 20,
                decoration: BoxDecoration(
                    color: ThemeColor.appColor,
                    borderRadius: BorderRadius.circular(4)),
              ),
              SizedBox(
                width: 6.w,
              ),
              Text(
                '热心红娘',
                style: TextStyle(
                    color: '#262626'.stringToColor,
                    fontSize: 20.sp,
                    fontWeight: FontWeight.w600),
              ),
              const Spacer(),
              InkWell(
                onTap: () {
                  Navigator.of(Get.context!).push(MaterialPageRoute(
                      builder: (builder) => const MatcherListUi()));
                  // jumpNearByView(titleName: '附近单身驿站');
                },
                child: Row(
                  children: [
                    Text(
                      '查看更多',
                      style: TextStyle(
                          color: ThemeColor.gray4C4C4CColor, fontSize: 14),
                    ),
                    const SizedBox(
                      width: 5,
                    ),
                    Icon(
                      Icons.arrow_forward_ios,
                      size: 14,
                      color: ThemeColor.textColorSecond,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ));
  }

  /// 列表item
  Widget buildItemView(int index) {
    final data = controller.state.matchmakerList[index];
    bool isWoman = data['realSex'] == 2 ? true : false;
    Color textColor =
        isWoman ? ThemeColor.womanTextColor : ThemeColor.manTextColor;
    const Color black4C4E50Color = Color(0xFF4C4E50);
    final introduce = data['introduce'];
    return GestureDetector(
        onTap: () {
          if (data['memberId'].toString().isNotEmpty) {
            Navigator.of(Get.context!).push(MaterialPageRoute(
                builder: (builder) => MatcherDetailUi(
                    data['memberId'].toString(), controller.state.realSex)));
          }
        },
        child: Container(
            padding: EdgeInsets.symmetric(horizontal: 14.w, vertical: 12.w),
            margin: EdgeInsets.symmetric(horizontal: 14.w, vertical: 6.w),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(10.w),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withAlpha(20),
                  blurRadius: 1.0,
                  spreadRadius: 0.0,
                  offset: const Offset(0, 0),
                ),
              ],
            ),
            child: Row(
              children: [
                SizedBox(
                  width: 62.w,
                  height: 62.w,
                  child: Stack(
                    children: [
                      Stack(
                        children: [
                          ChatNetImage(
                            imageUrl: '${data['avatarImg']}',
                            width: 62.w,
                            height: 62.w,
                            radius: 31.w,
                          ),
                          Positioned(
                            right: 5,
                            bottom: 5,
                            child: data['singleState'] == 1
                                ? Image.asset(
                                    "images/ic_fdsbzh.png",
                                    width: 33,
                                    height: 23,
                                    fit: BoxFit.fill,
                                  )
                                : Container(),
                          )
                        ],
                      ),
                      Positioned(
                        right: 5,
                        bottom: 5,
                        child: data['singleState'] == 1
                            ? Image.asset(
                                "images/ic_fdsbzh.png",
                                width: 33,
                                height: 23,
                                fit: BoxFit.fill,
                              )
                            : Container(),
                      )
                    ],
                  ),
                ),
                const SizedBox(
                  width: 12,
                ),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        ConstrainedBox(
                          constraints: BoxConstraints(maxWidth: 1.sw - 150),
                          child: Text(
                            data['nickName'],
                            style: const TextStyle(
                              color: Colors.black,
                              fontSize: 14,
                            ),
                            overflow: TextOverflow.ellipsis,
                          ),
                        ),
                      ],
                    ),
                    SizedBox(
                      height: 10.w,
                    ),
                    // 地址性别
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Container(
                          alignment: Alignment.center,
                          decoration: ShapeDecoration(
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(7),
                              ),
                              color: isWoman
                                  ? ThemeColor.womanColor
                                  : ThemeColor.manColor),
                          width: 40,
                          height: 14,
                          child: IconText(
                            data['age'].toString() == 'null'
                                ? '0'
                                : data['age'].toString(),
                            icon: isWoman
                                ? Image.asset(
                                    'images/user/txl_woman_icon.png',
                                    width: 12.w,
                                    height: 8.w,
                                  )
                                : Icon(Icons.male, color: textColor),
                            iconSize: 14,
                            style: TextStyle(
                              color: textColor,
                              fontSize: 10.sp,
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 5,
                        ),
                        Container(
                          decoration: BoxDecoration(
                              color: const Color(0xFFF5F5F7),
                              borderRadius: BorderRadius.circular(12)),
                          padding: const EdgeInsets.symmetric(
                              vertical: 2, horizontal: 6),
                          alignment: Alignment.center,
                          child: Text(
                            "${data['homeAddr'] ?? ""}",
                            style: const TextStyle(
                                color: black4C4E50Color,
                                fontSize: 10,
                                overflow: TextOverflow.ellipsis),
                          ),
                        )
                      ],
                    ),
                    SizedBox(
                      height: 10.w,
                    ),
                    Text(
                      introduce ?? '他很懒，什么都没写',
                      style: TextStyle(
                        fontSize: 10.sp,
                        color: introduce == null
                            ? ThemeColor.lineColor
                            : black4C4E50Color,
                      ),
                    ),
                  ],
                ),
                const Spacer(),
                Container(
                  width: 48.w,
                  height: 25.w,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(25 / 2.0),
                      border: Border.all(
                          color: '#795AFC'.stringToColor, width: 1.0)),
                  alignment: Alignment.center,
                  child: Text(
                    '看看',
                    style: TextStyle(
                        fontSize: 12.sp, color: '#795AFC'.stringToColor),
                  ),
                ),
              ],
            )));
  }
}
